<template>
	<view class="content">
		<view class="head">
			<image src="../../../static/images/servicebg.jpg"></image>
			<view class="goods-item">
				<!-- 右侧盒子 -->
				<view class="goods-item-right">
					<!-- 商品的名称 -->
					<view class="goods-title">{{head.title}}</view>
					<!-- 价格 -->
					<view class="goods-info-box">
						<view class="goods-price1">超值价:&nbsp;</view>
						<view class="goods-price">¥{{head.price}}.00</view>
					</view>
				</view>
			</view>

			<view class="" style="display: flex;justify-content: space-around; margin-top: 75px;">
				<view :class="[active==0?'activePaixu':'paixu']" @click="paixu0">
					基本信息
				</view>
				<view :class="[active==1?'activePaixu':'paixu']" @click="paixu1">
					价格说明
				</view>
				<view :class="[active==2?'activePaixu':'paixu']" @click="paixu2">
					预定须知
				</view>
			</view>
		</view>

		<view>
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" circular :indicator-dots="indicatorDots"
				:autoplay="autoplay" :interval="interval" :duration="duration" :current=active>

				<swiper-item>
					<image :src="defaultPic1" mode="widthFix">
					</image>
					<!-- <view class="swiper-item">
						1
					</view> -->
				</swiper-item>
				<swiper-item>
					<image :src="defaultPic2" mode="widthFix">
					</image>
				</swiper-item>
				<swiper-item>
					<image :src="defaultPic3" mode="widthFix">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<!-- 操作按钮 -->
				<!-- <view class="foo-item-btn">
					<view class="btn-wrapper">
						<view class="btn-item btn-item-main">
							<text>立即购买</text>
						</view>
					</view>
				</view> -->
				<button class="button" @click="toBuy(serviceId)">立即购买</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				serviceId: '',
				isLogin: true,
				defaultPic1: '../../../static/images/service1.jpg',
				defaultPic2: '../../../static/images/service2.jpg',
				defaultPic3: '../../../static/images/service3.jpg',
				swiperHeight: 2800, // 默认高度
				boxColor: 'blue', // 初始颜色
				head: '',

			}
		},
		onLoad: function(option) {
			// console.log('测试')
			this.serviceId = option.id
			// 获取页面数据
			this.getsvcontents()
		},
		methods: {
			toBuy(id){
				uni.navigateTo({
					url: `/pages/index/buy/buy?id=${id}`
				});
			},

			paixu0() {
				this.active = 0
				this.swiperHeight = 2800
			},
			paixu1() {
				this.active = 1
				this.swiperHeight = 900
			},
			paixu2() {
				this.active = 2
				this.swiperHeight = 3300
			},

			//获取地址信息
			getsvcontents() {
				if (this.isLogin == true) {
					try {
						uni.request({
							url: 'http://localhost:8080/api/service/content/list',
							data: {
								serviceId: this.serviceId,
							},
							method: 'GET',
							success: (res) => {
								if (res.data.code == '200') {
									this.services = res.data.data
									// console.log(this.services[0].name)
								} else {

								}
							}
						})
						uni.request({
							url: 'http://localhost:8080/api/service/content/byId',
							data: {
								serviceId: this.serviceId,
							},
							method: 'GET',
							success: (res) => {
								if (res.data.code == '200') {
									this.head = res.data.data
									// console.log(this.services[0].name)
								} else {

								}
							}
						})

					} catch (e) {
						// error
					}
				}
			},
		}
	}
</script>

<style>
	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		margin-bottom: 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
	
	.goods-item {
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #f0f0f0;
		margin-top: -30px;
		width: 360px;
		margin-left: 15px;
		z-index: 999;
		position: absolute;
		margin-right: 10px;
		background-color: #fff;


		.goods-item-right {
			margin-left: 30px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.goods-title {
				margin-top: 10px;
				font-size: 18px;
				color: #1e8449;
			}

			.goods-content {
				font-size: 14px;

			}

			.goods-info-box {
				margin-top: 10px;
				margin-bottom: 10px;
				display: flex;
				align-items: center;

				.goods-price {
					color: #c00000;
					font-size: 16px;
				}

				.goods-price1 {
					font-size: 14px;
				}
			}
		}
	}

	.swiper {
		/* height: auto; */
		width: 670rpx;
		border: #1e8449 2px solid;
		text-align: center;
		margin-top: -40px;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper image {
		width: 100%;
		/* height: 2000rpx; */
	}

	.head image {
		height: 350rpx;
		width: 100%;
	}

	.head {
		height: 700rpx;
		width: 100%;
	}


	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.paixu {
		padding: 20rpx;
	}

	.activePaixu {
		padding: 20rpx;
		color: #1e8449;
		font-weight: bolder;
	}
	
	/* 底部 */
	.footer-fixed {
	  position: fixed;
	  bottom: var(--window-bottom);
	  left: 0;
	  right: 0;
	  display: flex;
	  z-index: 11;
	  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
	  background: #fff;
	
	  /* // 设置ios刘海屏底部横线安全区域 */
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	}
	
	.footer-container {
	  width: 100%;
	  /* display: flex; */
	  height: 106rpx;
	  align-items: center;
	}
	
	
</style>